<template>
  <a-row class='h100 pos-rel' style='overflow:hidden;'>
    <div class='bg-img pos-abs'></div>
    <!-- 左侧文件树 -->
    <a-col :span="left" class='h100 bg-left'>
      <div class="clearfix pad10 h100" style='overflow:auto;'>
        <a-row>
          <a-input-search placeholder="输入搜索内容，回车搜索" enter-button @search="onSearch" style="width:100%" />
        </a-row>
        <a-row>
          <a-tree :treeData="treeData" :selected-keys="selectedKeys" @select="onSelect"> </a-tree>
        </a-row>
      </div>
    </a-col>

    <!--右侧缩略图-->
    <a-col :span="right" class='h100'>
      <a-card class='h100 overflow-auto pos-rel'>
        <i class='pos-abs show-icon' @click='showHide'><img src='./menu2.png' style='width:20px;opacity:.8;'></i>
        <h2>{{ article.wenzbt }}</h2>
        <a-divider />
        <p v-html="article.wenznr"></p>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  data() {
    return {
      article: {},
      treeData: [],
      left:5,
      right:19,
      selectedKeys: [],
      isTreeShow:false,
    }
  },

  mounted() {
    let that = this

    getAction('/zhisk/zhiskLanm/queryTreeList').then((res) => {
      if (res.success) {
        this.allTreeKeys = []
        for (let i = 0; i < res.result.length; i++) {
          let temp = res.result[i]
          that.treeData.push(temp)
          // that.lanmTree.push(temp)
          // that.setThisExpandedKeys(temp)
          // that.getAllKeys(temp)
          // console.log(temp.id)
        }
        this.loading = false
      }
    })
  },
  created() {
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function("event.returnValue=false");
      // 禁用选择
      document.onselectstart = new Function("event.returnValue=false");
    });
  },
  methods: {
    onSearch(value) {
      console.log(value);
    },
    showHide(){
      this.isTreeShow = !this.isTreeShow;
      if (this.isTreeShow) {
        this.left = 0;
        this.right = 24;
      } else {
        this.left = 5;
        this.right = 19;
      }
    },
    onSelect(selectedKeys) {
      getAction('/zhisk/zhiskLanm/queryZhiskWenzByMainId', { id: selectedKeys[0] }).then((res) => {
        if (res.success && res.result.length > 0) {
          this.article = res.result[0]
        } else {
          this.article = {}
        }
      })
    },
  },
}
</script>

<style scoped>
.bg-img{background:url(logo.png) repeat center center;
  left: -50%;
  right: 0px;
  top: -50%;
  bottom: 0px;
  width: 200%;
  height: 200%;
  transform:rotate(341deg);
  -ms-transform:rotate(341deg); /* Internet Explorer */
  -moz-transform:rotate(341deg); /* Firefox */
  -webkit-transform:rotate(341deg); /* Safari 和 Chrome */
  -o-transform:rotate(341deg); /* Opera */
}
.clearfix:after{content:'';display:block;clear:both;}
.fxl{float:left;}
.fxr{float:right;}
.pos-rel{position: relative;}
.pos-abs{position: absolute;}
.h100{height:100%;}
.bg-left{
  border-right: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(0);
  transition: 0.5s transform;
}
.pad10{padding:10px;}
.overflow-auto{overflow:auto;}
.show-icon{cursor:pointer;padding:10px;display: inline-block;top: 0px;left: 0px;}
/deep/.h100 .ant-card-body{padding:10px;height:100%;position: relative}
/deep/.h100 .ant-card-body h2{text-align: center;padding:10px;}
/deep/.h100 .ant-card{background:transparent;}
</style>